<!DOCTYPE html>
<html>
<head>
    <title>实体书列表</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
<div style="margin-left: 10px;margin-top: 10px">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">书名</label>
                <div class="layui-input-inline" style="width: 150px">
                    <input type="text" class="layui-input" id="bookName" placeholder="书名" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-inline" style="width: 150px">
                    <input type="text" class="layui-input" id="author" placeholder="作者" autocomplete="off">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">图书类型</label>
                <div class="layui-input-inline" style="width: 150px">
                    <select id="type">
                        <option value="">类型</option>
                        <option value="1">教育</option>
                        <option value="2">科技</option>
                        <option value="3">文学</option>
                        <option value="4">小说</option>
                        <option value="5">其他</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">图书状态</label>
                <div class="layui-input-inline" style="width: 150px">
                    <select id="isRent">
                        <option value="">图书状态</option>
                        <option value="0">未入库</option>
                        <option value="1">可借阅</option>
                        <option value="2">已借出</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">逻辑删除</label>
                <div class="layui-input-inline" style="width: 150px">
                    <select id="deleted">
                        <option value="">逻辑删除</option>
                        <option value="0">有效</option>
                        <option value="1">无效</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" id="searchBtn">查询</button>
            </div>
        </div>
    </form>
    <hr>
    <table id="dataTable" lay-filter="dataTableFilter"></table>
</div>

<script type="text/html" id="headerBtns">
    <div class="layui-btn-group">
<%--        <shiro:hasPermission name="car:add">--%>
            <button class="layui-btn layui-btn-sm" type="button" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>添加
            </button>
<%--        </shiro:hasPermission>--%>
    </div>
</script>
<script type="text/html" id="rowBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" type="button" lay-event="rent">
            <i class="layui-icon layui-icon-release"></i>借阅
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" type="button" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" type="button" lay-event="check">
            <i class="layui-icon layui-icon-up"></i>入库
        </button>
    </div>
</script>

<script type="text/html" id="addTpl">
    <form class="layui-form layui-form-pane" style="margin-top: 15px;margin-left: 15px">
        <div class="layui-form-item">
            <label class="layui-form-label">
                书名
            </label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="bookName" placeholder="书名" lay-verify="required" lay-reqText="书名不能为空" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图书类型</label>
            <div class="layui-input-inline">
                <select name="type" lay-verify="required" lay-reqText="图书类型不能为空">--%>
                    <option value="">类型</option>
                    <option value="1">教育</option>
                    <option value="2">科技</option>
                    <option value="3">文学</option>
                    <option value="4">小说</option>
                    <option value="5">其他</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="author" placeholder="作者" lay-verify="required" lay-reqText="作者不能为空" />
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="width: 300px">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="descp" placeholder="描述"></textarea>
            </div>
        </div>
        <button id="subBtn" type="button" lay-filter="subBtnFilter" lay-submit style="display: none"></button>
    </form>
</script>


<script id="rentTpl" type="text/html">
    <form class="layui-form layui-form-pane" lay-filter="rentFormFilter" style="margin-top: 15px;margin-left: 15px">
        <div class="layui-form-item" hidden>
            <label class="layui-form-label">图书ID</label>
            <div class="layui-input-inline">
                <input type="text" name="bookId" readonly class="layui-input" autocomplete="off" placeholder="图书ID" lay-verify="required" lay-reqText="图书ID不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">书名</label>
            <div class="layui-input-inline">
                <input type="text" name="bookName" readonly class="layui-input" autocomplete="off" placeholder="书名" lay-verify="required" lay-reqText="书名不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图书类型</label>
            <div class="layui-input-inline">
                <select name="type" lay-verify="required" lay-reqText="图书类型不能为空">
                    <option value="">类型</option>
                    <option value="1">教育</option>
                    <option value="2">科技</option>
                    <option value="3">文学</option>
                    <option value="4">小说</option>
                    <option value="5">其他</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">借阅时间</label>
            <div class="layui-input-inline">
                <input type="text" id="rentTime" name="rentTime" class="layui-input" readonly autocomplete="off" placeholder="借书时间" lay-verify="required" lay-reqText="借书时间不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">借阅人</label>
            <div class="layui-input-inline">
                <input type="text" name="rentName" class="layui-input" autocomplete="off" placeholder="借阅人名称" lay-verify="required" lay-reqText="借阅人名称不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" class="layui-input" autocomplete="off" placeholder="手机号" lay-verify="required|phone" lay-reqText="手机号不能为空" >
            </div>
        </div>
        <button type="button" lay-submit id="subBtn2" lay-filter="subBtnFilter" style="display: none"></button>
    </form>
</script>



<script src="${request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['form', 'table', 'jquery', 'layer','upload','laydate'], function () {
        let cxt = "${request.contextPath}";
        let form = layui.form;
        let table = layui.table;
        let $ = layui.jquery;
        let layer = layui.layer;
        let upload = layui.upload;
        let laydate = layui.laydate;

        let tabOpt = {
            elem: "#dataTable",
            id: "dataTableId",
            url: cxt + "/book/page.do",
            toolbar:"#headerBtns",
            cols: [[
                {field:'bookId', title:'ID', width:100,hide:true},
                {field: "bookName", title: "书名"},
                {field: "type", title: "图书类型",templet: function (d) {
                        let type = d.type;
                        if (type == 1) {
                            return "教育";
                        } else if (type == 2) {
                            return "科学";
                        }else if (type == 3) {
                            return "文学";
                        }else if (type == 4) {
                            return "小说";
                        }else if (type == 5) {
                            return "其他";
                        }
                    }},
                {field: "author", title: "作者"},
                {
                    field: "isRent", title: "状态", templet: function (d) {
                        let isRent = d.isRent;
                        if (isRent == 0) {
                            return "未入库";
                        } else if(isRent == 1) {
                            return "可借阅";
                        } else if (isRent == 2) {
                            return "已借出";
                        }
                    }
                },
                {field: "descp", title: "描述"},
                {
                    field: "deleted", title: "逻辑删除", templet: function (d) {
                        let deleted = d.deleted;
                        if (deleted == 0) {
                            return "有效";
                        } else if(deleted == 1) {
                            return "无效";
                        } ;
                    }
                },
                {field: "bookTime", title: "创建时间"},
                {title: "操作",toolbar:"#rowBtns",minWidth:190,fixed:"right"}
            ]],
            page: true,
            parseData: function (rs) {
                if (rs.code == 200) {
                    return {
                        code: rs.code,
                        msg: rs.msg,
                        count: rs.data.total,
                        data: rs.data.records
                    }
                }
            },
            response: {
                statusCode: 200
            }
        };
        //渲染数据表格
        let tabIns = table.render(tabOpt);
        //搜索
        $("#searchBtn").click(function (){
            let bookName = $("#bookName").val();
            let author = $("#author").val();
            let type = $("#type").val()
            let isRent = $("#isRent").val();
            let deleted = $("#deleted").val();

            tabIns.reload({
                where:{
                    bookName:bookName,
                    author:author,
                    type:type,
                    isRent:isRent,
                    deleted:deleted
                }
            })
        });
        //头工具栏事件
        table.on("toolbar(dataTableFilter)",function (d){
            let event = d.event;
            if(event == "add"){
                add();
            }
        })

        //新增书籍
        function add(){
            let layerOpt = {
                title:"编辑",
                type:1,
                content:$("#addTpl").html(),
                area:['330px','560px'],
                btn:['确认','取消'],
                btnAlign:'c',
                anim:4,
                success:function (layero,index){
                    //渲染表单
                    form.render();
                    //设置表单提交监听事件
                    form.on("submit(subBtnFilter)",function (d){
                        let formData = d.field;
                        //进行ajax提交
                        $.post(cxt+"/book/add.do",formData,function (rs){
                            layer.msg(rs.msg);
                            if(rs.code != 200){
                                return false;
                            }
                            //刷新表格
                            $("#searchBtn").click();
                            //关闭弹层
                            layer.close(index);
                        });

                        return false;//阻止默认提交行为
                    });
                },
                yes:function (index,layero){
                    $("#subBtn").click();
                }
            };
            layer.open(layerOpt);
        }

        // function  add(){
        //     let layerOpt = {
        //         title:"编辑",
        //         type:1,
        //         content:$("#addTpl").html(),
        //         area:['570px','620px'],
        //         btn:['确认','取消'],
        //         btnAlign:'c',
        //         anim:4,
        //         success:function (layero,index){
        //             //渲染表单
        //             form.render();
        //             //为图片绑定上传事件
        //             upload.render({
        //                 elem:"#uploadImg",
        //                 url:cxt+"/file/uploadImg.do",
        //                 field:"img",//文件上传的 域值
        //                 done:function (rs,index,upload){//文件上传完成的回调
        //                     if(rs.code != 200){
        //                         layer.msg(rs.msg);
        //                         return false;
        //                     }
        //                     let  data = rs.data;
        //                     let imgUrl = cxt +"/"+data;//图片的网络路径
        //                     $("#uploadImg").attr("src",imgUrl);// 显示车辆图片
        //                     //给input赋值
        //                     $("#img").val(data);
        //                 }
        //             });
        //             //设置表单提交监听事件
        //             form.on("submit(subBtnFilter)",function (d){
        //                 let formData = d.field;
        //                 //进行ajax提交
        //                 $.post(cxt+"/buscar/add.do",formData,function (rs){
        //                     layer.msg(rs.msg);
        //                     if(rs.code != 200){
        //                         return false;
        //                     }
        //                     //刷新表格
        //                     $("#searchBtn").click();
        //                     //关闭弹层
        //                     layer.close(index);
        //                 });
        //
        //                 return false;//阻止默认提交行为
        //             });
        //         },
        //         yes:function (index,layero){
        //             $("#subBtn").click();
        //         }
        //     };
        //     layer.open(layerOpt);
        // }

        //行工具栏事件
        table.on("tool(dataTableFilter)",function (d){
            let event = d.event;
            let rowData = d.data;
            if(event == "rent"){
                //调用具体的重置请求
                rent(rowData);
            } else if (event == "delete"){
                del(rowData);
            } else if (event == "check"){
                check(rowData);
            }
        })

        /**
         * 借阅图书
         * @param rowData
         */
        function rent(rowData){
            let layerOpt = {
                title:"借阅",
                type:1,
                content:$("#rentTpl").html(),
                area:['330px','560px'],
                btn:['确认','取消'],
                btnAlign:'c',
                anim:4,
                success:function (layero,index){
                    //渲染表单
                    form.render();
                    //为表单赋值
                    form.val("rentFormFilter",rowData);
                    console.log(rowData)
                    //form.append('bookId', rowData.bookId);
                    //时间选择器组件
                    laydate.render({
                        elem:"#rentTime",
                        range:"~"
                    })
                    //设置表单提交监听事件
                    form.on("submit(subBtnFilter)",function (d){
                        let formData = d.field;
                        //进行ajax提交
                        $.post(cxt+"/bookRent/rent.do",formData,function (rs){
                            layer.msg(rs.msg);
                            if(rs.code != 200){
                                return false;
                            }
                            //刷新表格
                            $("#searchBtn").click();
                            //关闭弹层
                            layer.close(index);
                        });

                        return false;//阻止默认提交行为
                    });
                },
                yes:function (index,layero){
                    $("#subBtn2").click();
                }
            };
            layer.open(layerOpt);
        }


        /**
         * 删除图书
         * @param rowData  行数据
         */
        function del(rowData){
            layer.confirm("确定要删除吗?",function (index){
                $.get(cxt+"/book/delete.do?bookId="+rowData.bookId,function (rs){
                    layer.msg(rs.msg);
                    layer.close(index);//关闭弹出层
                    $("#searchBtn").click();
                })
            })
        }

        /**
         * 检查入库
         * @param rowData  行数据
         */
        function check(rowData){
            layer.confirm("确定要入库吗?",function (index){
                $.get(cxt+"/book/check.do?bookId="+rowData.bookId,function (rs){
                    layer.msg(rs.msg);
                    layer.close(index);//关闭弹出层
                    $("#searchBtn").click();
                })
            })
        }

        /**
         * 显示图片
         * @param rowData
         */
        function showImg(rowData){
            let img = {
                //相册标题
                "title": "汽车图片",
                 //初始显示的图片序号，默认0
                "start": 0,
                "data": [   //相册包含的图片，数组格式
                    {
                        "alt": rowData.num,
                        "src": cxt+"/"+rowData.img, //原图地址
                        "thumb": cxt+"/"+rowData.img,//缩略图地址
                    }
                ]
            };
            layer.photos({
                photos: img
                //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                ,anim: 4
            });
            console.log(layer.photos);
        }
    })
</script>
</body>
</html>
